<template>
  <div :class="[paginationData ? 'headAndPag' : 'headNoPag' ,'searchTable']">
      <slot name="head">
          <el-input class="searchInput" :style="searchStyle || (selection? '' : 'width: 300px')" v-model="searchText"
            suffix-icon="el-icon-search" :placeholder="placetext?placetext:'搜索'"></el-input>
        </slot>
    <div style="clear: both;"></div>
    <div class="searchTable_main">
      <el-table v-loading="sloading" element-loading-text="拼命加载中,请稍候..." ref="searchTable" class="searchTable_table"
        :data="tableData"  @select="selectChange" @select-all="selectChange" stripe border align="center">
        <slot />
      </el-table>
    </div>
    <div class="page" :style="paginationData === false ? 'padding:4px  0px;' : 'padding:4px  0px;border:1px solid #dfe6ec;border-top: none;'"
      height="60px">
      <el-pagination v-if="paginationData" layout="total,prev, pager, next, jumper"
        :page-size="pageSizeData" :total="total" @current-change="pageChangeHandler">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    this.getData(1)
    return {
      tableData: [ ],
      searchText: '',
      pageIndex: 1,
      total: 0,
      paginationData: false,
      sloading: true
    }
  },
  props: {
    pageSizeData: {
      type: Number,
      default: 10
    },
    rowkey: String,
    url: String, // 请求数据的地址
    searchStyle: String, // 搜索框的样式
    placetext: String, // 搜索框中的placeholder
    selection: Object // 前面的checkbox,传入selectChange事件
  },
  watch: {
    tableData: function () {
      this.paginationData = this.tableData.length > 0
      this.sloading = false
    }
  },
  methods: {
    pageChangeHandler: function (index) {
      this.getData(index)
      // this.pageIndex = index
      this.sloading = true
    },
    selectChange: function (rows, row) {
      if (this.selection) {
        this.selection(row, rows)
      }
    },
    getData (index) {
      let self = this
      self.$axios.get(self.url + 'index=' + index + '&size=' + self.pageSizeData).then(function (data) {
        self.tableData = data
        self.total = data.changes
      })
    }
  }
}
</script>

<style>
  .searchInput {
    float: right;
  }

  .page {
    text-align: center;
    overflow-x: auto;
  }

  .smallPage .el-pagination button {
    position: relative;
    top: 3px;
  }

  .smallPage .el-pagination__jump {
    margin: 0px;
  }

  .searchTable_main {
    overflow: auto;
  }

  .searchTable_main .el-table {
    height: 100%;
  }

  td .el-container {
    padding: 15px;
    background-color: white;
  }

  td .el-container .el-table {
    min-height: 300px;
  }

  td .el-tabs {
    padding: 15px;
    background-color: white;
  }

  .headAndPag {
    grid-template-rows: 60px 1fr 60px;
  }

  .headNoPag {
    grid-template-rows: 60px 1fr;
  }

  .noHeadPag {
    grid-template-rows: 1fr 60px;
  }

  .searchTable {
    /* display: grid; */
    height: 100%;
  }
</style>
